Web Components
https://gyazo.com/435b9f138e72b253cdbc0b4afb455b0f
website
Introduction
spec
Can I use
mdn
主に以下の3つの組み合わせたものの総称
Custom Element
Shadow DOM
HTML Templates
説明上、ES Modulesも含まれることもあるっぽい ref
参考
ライブラリを使わずここまでできる!Web Componentsで近未来のフロントエンド開発 | 株式会社ヌーラボ(Nulab inc.)
例もあって概要がわかりやすい
#WIP
Web ComponentsはいくつかのWeb標準の総称
HTMLの要素をカプセル化して再利用可能なパーツにするためのブラウザのAPI群
ReactなどのComponent設計と同じことをLibraryを使わずにできる
https://kinsta.com/jp/blog/web-components/
sample
emoji-rain
やたら絵文字が降ってくるサイト
https://meowni.ca/emoji-rain/components/emoji-rain/demo/
<emoji-rain>というタグを定義している
ReactユーザーのためのWeb Componentsみたいな文章で、サッと説明してほしい
Reactを知っている人向けのWeb Componentsの説明を誰かしてくれ
何がどう優れていて、
お互いがコンフリクトする感じでもなくて、
みたいな話をしてほしい
#??
誰がどういうモチベで使うの?
Reactなどを使わずに、これを利用する理由は?
Reactに比べて何が嬉しい?
仮想DOM?
JSは関係ある?
JSには依存しない?
めちゃめちゃ関係あるmrsekut.icon
動かすにはbundlerとかが必要?それともbrowserのみで観血する?
webpackとか?
既にどんなブラウザでも使える?
例を見たい
例えば、twigと組み合わせる、といったことはできるの?
流れ
ウェブコンポーネントの機能を明示したクラスもしくは関数を作成する
classも使える
新しく作成したカスタム要素を登録する
CustomElementRegistry.define() メソッドに、要素の名前、機能が明示されているクラスもしくは関数、またオプションでどの要素を継承するかを渡す
必要なら Element.attachShadow() メソッドを使って、シャドウ DOM をカスタム要素に紐付ける
通常の DOM メソッドを使って、子要素やイベントリスナーなどをシャドウ DOM に追加する
必要なら <template> と <slot> を使って、HTML テンプレートを定義します。通常の DOM メソッドを再度使って、テンプレートをクローンし、シャドウ DOM に紐付ける
ページ内のお好きな場所で、通常の HTML 要素のように、カスタム要素を使う
Web Components v.s. Component Framework?
Web Componentsによって、Reactなどが不要になるか?
前提として、Web ComponentsとAngularやReactは、異なる問題を解決するために作られたものであることを理解する必要があります。Reactなどのモダンなフレームワークは、DOMとデータの同期する豊富なライブラリを提供します。Web Componentsを使用する場合、データバインディングやステートマネジメントなど、一般的なアプリ開発フレームワークで使用できる機能がない点に注意が必要です。一方でWeb Componentsはカプセル化を可能にし、異なるプロジェクトやプラットフォームで使用できる相互運用可能なモジュールを提供します。また前述の通り、学習コストが高いモダンフレームワークに比べて、Web Componentsは気軽に利用を始めることができます。ref
これって言うほど「一方で」って感じなのか?
Reactもカプセル化されてない?
https://ja.reactjs.org/docs/web-components.html
https://developers.google.com/web/fundamentals/web-components/shadowdom?hl=ja
Reactとの役割の違いをあまり理解していない
Reactとは異なるもの
併用は可能
何が嬉しい?
特定のフレームワークReact, Vue、Angularとかにこだわらずに使える
UIのパーツのためのライブラリを
Ionicとか?
react-wc
https://blog.uhy.ooo/entry/2020-10-03/react-wc/
@uhyo氏の
Web Componentsを構築するlibrary
https://uit-inside.linecorp.com/episode/84